<template>
  <div class="app-container">
    <div class="select">
      <el-select
        v-for="item in selectorArray"
        :key="item.id"
        v-model="selectedValues[item.id - 1]"
        filterable
        @change="change(item)"
      >
        <el-option
          v-for="option in item.options"
          :key="option.value"
          :value="option.value"
          :label="option.label"
        ></el-option>
      </el-select>
      <div class="btn">
        <el-button type="primary" @click="search">查询</el-button>
        <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
      </div>
    </div>
    <div class="table">
      <el-table v-loading="loading" element-loading-text="正在加载，请稍后" :data="tableList" border    tooltip-effect="dark" size="medium">
        <el-table-column label="序号" width="55" align="center">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="管理所" min-width="150px" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.controlHouse }}</span>
          </template>
        </el-table-column>
        <el-table-column label="泵站" min-width="80px" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.pumpStation }}</span>
          </template>
        </el-table-column>
        <el-table-column label="设备" min-width="100px" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.device }}</span>
          </template>
        </el-table-column>
        <el-table-column label="运行设备" min-width="150px" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.opeDevice }}</span>
          </template>
        </el-table-column>
        <el-table-column label="监测点" min-width="150px" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.monitorField }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          fixed="right"
          align="center"
          min-width="120px"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-tickets"
              @click="handleExamine(scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :current-page.sync="queryParams.pageNum"
          :page-size.sync="queryParams.pageSize"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          position="right"
        />
      </div>
    </div>
    <el-dialog
      title="查看监测详情"
      :visible.sync="dialogVisible"
      width="20%"
      :before-close="handleClose"
      append-to-body
    >
      <el-form ref="form" :model="dialogData" label-width="120px">
        <el-row>
          <div class="dividerBox">
            <el-divider direction="vertical" class="divider"></el-divider
            ><span style="font-weight: 600; font-size: 16px; color: #333;"
              >详情信息</span
            >
          </div>
        </el-row>
        <el-form-item label="管理所" prop="mgtLv1">
          <el-input disabled v-model="dialogData.controlHouse"> </el-input>
        </el-form-item>
        <el-form-item label="泵站" prop="mgtLv2">
          <el-input disabled v-model="dialogData.pumpStation"> </el-input>
        </el-form-item>
        <el-form-item label="设备" prop="mgtLv3">
          <el-input disabled v-model="dialogData.device"> </el-input>
        </el-form-item>
        <el-form-item label="运行设备" prop="station">
          <el-input disabled v-model="dialogData.opeDevice"> </el-input>
        </el-form-item>
        <el-form-item label="监测点" prop="device">
          <el-input disabled v-model="dialogData.monitorField"> </el-input>
        </el-form-item>
        <el-form-item label="实时" prop="operation">
          <el-switch v-model="radioValue" @change="switchChange"> </el-switch>
        </el-form-item>
        <el-form-item label="监测值" prop="operation">
          <div style="font-size: 15px;">{{ num }}</div>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getLv1ToLv4,
  getLv5,
  getLv6,
  getLv7,
  getLv8,
  getTableData,
  getPoint
} from '@/api/pointInfoMonitor/index.js'

export default {
  name: 'SdssDatagovernanceFrontendIndex',

  data() {
    return {
      size: '',
      loading: false,
      dialogVisible: false,
      dialogLoading: false,
      selectorArray: [
        {
          id: 1,
          options: []
        },
        {
          id: 2,
          options: []
        },
        {
          id: 3,
          options: []
        },
        { id: 4, options: [] },
        { id: 5, options: [] },
        { id: 6, options: [] },
        { id: 7, options: [] },
        { id: 8, options: [] }
      ],
      selectedValues: ['', '', '', '', '', '', '', ''],
      tableList: [],
      dialogData: {},
      queryParams: {
        lv1: '',
        lv2: '',
        lv3: '',
        lv4: '',
        lv5: '',
        lv6: '',
        lv7: '',
        lv8: '',
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      radioValue: false,
      num: '',
      timer: null
    }
  },
  created() {
    this.getLv1ToLv4Data(0)
    window.addEventListener('resize', this.sizeFun)
  },
  mounted() {
    this.sizeFun()
  },

  methods: {
    sizeFun() {
      this.size = document.documentElement.clientHeight - 350
      
    },
    //下拉框选中
    change(item) {
      console.log(item)
      this.loading = true
      if (item.id == 1) {
        this.selectorArray[1].options = []
        this.selectorArray[2].options = []
        this.selectorArray[3].options = []
        this.selectorArray[4].options = []
        this.selectorArray[5].options = []
        this.selectorArray[6].options = []
        this.selectorArray[7].options = []
        this.selectedValues[1] = ''
        this.selectedValues[2] = ''
        this.selectedValues[3] = ''
        this.selectedValues[4] = ''
        this.selectedValues[5] = ''
        this.selectedValues[6] = ''
        this.selectedValues[7] = ''
        this.queryParams = {
          lv1: '',
          lv2: '',
          lv3: '',
          lv4: '',
          lv5: '',
          lv6: '',
          lv7: '',
          lv8: '',
          pageNum: 1,
          pageSize: 10
        }
        console.log(this.selectedValues, 'selectedValues')
        getLv1ToLv4(this.selectedValues[item.id - 1]).then((res) => {
          console.log(res, 'lv1ToLv4')
          const result = res.data.data
          if (res.data.code == 200) {
            result.forEach((item) => {
              this.selectorArray[1].options.push({
                value: item.deptId,
                label: item.deptName
              })
            })
            this.queryParams.lv1 = 0
            this.getList()
          } else {
            this.$message.error(res.data.msg)
          }
        })
      } else if (item.id == 2) {
        this.selectorArray[2].options = []
        this.selectorArray[3].options = []
        this.selectorArray[4].options = []
        this.selectorArray[5].options = []
        this.selectorArray[6].options = []
        this.selectorArray[7].options = []
        this.selectedValues[2] = ''
        this.selectedValues[3] = ''
        this.selectedValues[4] = ''
        this.selectedValues[5] = ''
        this.selectedValues[6] = ''
        this.selectedValues[7] = ''
        this.queryParams.lv2 = ''
        this.queryParams.lv3 = ''
        this.queryParams.lv4 = ''
        this.queryParams.lv5 = ''
        this.queryParams.lv6 = ''
        this.queryParams.lv7 = ''
        this.queryParams.lv8 = ''

        getLv1ToLv4(this.selectedValues[item.id - 1]).then((res) => {
          console.log(res, 'lv1ToLv4')
          const result = res.data.data
          if (res.data.code == 200) {
            result.forEach((item) => {
              this.selectorArray[2].options.push({
                value: item.deptId,
                label: item.deptName
              })
            })
            this.queryParams.lv2 = this.selectedValues[item.id - 1]
            this.getList()
          } else {
            this.$message.error(res.data.msg)
          }
        })
      } else if (item.id == 3) {
        this.selectorArray[3].options = []
        this.selectorArray[4].options = []
        this.selectorArray[5].options = []
        this.selectorArray[6].options = []
        this.selectorArray[7].options = []
        this.selectedValues[3] = ''
        this.selectedValues[4] = ''
        this.selectedValues[5] = ''
        this.selectedValues[6] = ''
        this.selectedValues[7] = ''
        this.queryParams.lv3 = ''
        this.queryParams.lv4 = ''
        this.queryParams.lv5 = ''
        this.queryParams.lv6 = ''
        this.queryParams.lv7 = ''
        this.queryParams.lv8 = ''
        getLv1ToLv4(this.selectedValues[item.id - 1]).then((res) => {
          console.log(res, 'lv1ToLv4')
          const result = res.data.data
          if (res.data.code == 200) {
            result.forEach((item) => {
              this.selectorArray[3].options.push({
                value: item.deptId,
                label: item.deptName
              })
            })
            this.queryParams.lv3 = this.selectedValues[item.id - 1]
            this.getList()
          } else {
            this.$message.error(res.data.msg)
          }
        })
      } else if (item.id == 4) {
        this.selectorArray[4].options = []
        this.selectorArray[5].options = []
        this.selectorArray[6].options = []
        this.selectorArray[7].options = []
        this.selectedValues[4] = ''
        this.selectedValues[5] = ''
        this.selectedValues[6] = ''
        this.selectedValues[7] = ''
        this.queryParams.lv4 = ''
        this.queryParams.lv5 = ''
        this.queryParams.lv6 = ''
        this.queryParams.lv7 = ''
        this.queryParams.lv8 = ''
        getLv5(this.selectedValues[item.id - 1]).then((res) => {
          console.log(res, 'lv1ToLv4')
          const result = res.data.data
          if (res.data.code == 200) {
            result.forEach((item) => {
              this.selectorArray[4].options.push({
                value: item.pumpCode,
                label: item.pumpName
              })
            })
            this.queryParams.lv4 = this.selectedValues[item.id - 1]
            this.getList()
          } else {
            this.$message.error(res.data.msg)
          }
        })
      } else if (item.id == 5) {
        this.selectorArray[5].options = []
        this.selectorArray[6].options = []
        this.selectorArray[7].options = []
        this.selectedValues[5] = ''
        this.selectedValues[6] = ''
        this.selectedValues[7] = ''
        this.queryParams.lv5 = ''
        this.queryParams.lv6 = ''
        this.queryParams.lv7 = ''
        this.queryParams.lv8 = ''
        getLv6(this.selectedValues[item.id - 1]).then((res) => {
          console.log(res, 'lv1ToLv4')
          const result = res.data.data
          if (res.data.code == 200) {
            result.forEach((item) => {
              this.selectorArray[5].options.push({
                value: item.deviceCode,
                label: item.deviceName
              })
            })
            this.queryParams.lv5 = this.selectedValues[item.id - 1]
            this.getList()
          } else {
            this.$message.error(res.data.msg)
          }
        })
      } else if (item.id == 6) {
        this.selectorArray[6].options = []
        this.selectorArray[7].options = []
        this.selectedValues[6] = ''
        this.selectedValues[7] = ''
        this.queryParams.lv6 = ''
        this.queryParams.lv7 = ''
        this.queryParams.lv8 = ''
        getLv7(this.selectedValues[item.id - 1]).then((res) => {
          console.log(this.selectedValues[item.id - 1], 'lv77')
          const result = res.data.data
          if (res.data.code == 200) {
            result.forEach((item) => {
              this.selectorArray[6].options.push({
                value: item.opeDeviceCode,
                label: item.opeDeviceName
              })
            })
            this.queryParams.lv6 = this.selectedValues[item.id - 1]
            this.getList()
          } else {
            this.$message.error(res.data.msg)
          }
        })
      } else if (item.id == 7) {
        this.selectorArray[7].options = []
        this.selectedValues[7] = ''
        this.queryParams.lv7 = ''
        this.queryParams.lv8 = ''
        getLv8(this.selectedValues[item.id - 1]).then((res) => {
          console.log(res, 'lv1ToLv4')
          const result = res.data.data
          if (res.data.code == 200) {
            result.forEach((item) => {
              this.selectorArray[7].options.push({
                value: item.moniCode,
                label: item.moniName
              })
            })
            this.queryParams.lv7 = this.selectedValues[item.id - 1]
            this.getList()
          } else {
            this.$message.error(res.data.msg)
          }
        })
      } else if (item.id == 8) {
        this.queryParams.lv8 = ''
        this.queryParams.lv8 = this.selectedValues[item.id - 1]
        this.getList()
      }
    },
    //查询
    search() {
      this.getList()
    },
    //重置
    reset() {
      this.selectedValues = []
      this.selectorArray = [
        { id: 1, options: [] },
        { id: 2, options: [] },
        { id: 3, options: [] },
        { id: 4, options: [] },
        { id: 5, options: [] },
        { id: 6, options: [] },
        { id: 7, options: [] },
        { id: 8, options: [] }
      ]
      this.queryParams = {
        lv1: '',
        lv2: '',
        lv3: '',
        lv4: '',
        lv5: '',
        lv6: '',
        lv7: '',
        lv8: '',
        pageNum: 1,
        pageSize: 10
      }
      this.tableList = []
      this.total = 0
      this.getLv1ToLv4Data(0)
    },
    //详情
    handleExamine(row) {
      console.log(row, 'row')
      this.dialogData = row
      this.dialogVisible = true
      this.dialogLoading = true
      getPoint(row.altId).then((res) => {
        if (res.data.code == 200) {
          this.num = res.data.data
          this.dialogLoading = false
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    //弹窗关闭
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
          this.radioValue = false
          this.num = ''
          clearInterval(this.timer)
        })
        .catch((_) => {})
    },
    cancel() {
      this.radioValue = false
      this.num = ''
      clearInterval(this.timer)
      this.dialogVisible = false
    },
    confirm() {
      this.radioValue = false
      this.num = ''
      clearInterval(this.timer)
      this.dialogVisible = false
    },
    //每页条数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = val
      this.loading = true
      this.getList()
    },
    //页数
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.loading = true
      this.queryParams.pageNum = val
      this.getList()
    },
    //查询表格数据
    getList() {
      getTableData(this.queryParams).then((res) => {
        if (res.data.code == 200) {
          this.tableList = res.data.rows
          this.total = res.data.total
          this.loading = false
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    //lv1下拉框
    getLv1ToLv4Data(id) {
      getLv1ToLv4(id).then((res) => {
        console.log(res, 'lv1ToLv4')
        const result = res.data.data
        if (res.data.code == 200) {
          // this.selectorArray[id].options[0].value = result[0].deptId
          // this.selectorArray[id].options[0].label = result[0].deptName
          result.forEach((item) => {
            this.selectorArray[id].options.push({
              value: item.deptId,
              label: item.deptName
            })
          })
          this.selectedValues[0] = this.selectorArray[0].options[0].value
          this.change(this.selectorArray[0])
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    switchChange(state) {
      console.log(state, '开关的状态')
      if (state) {
        this.timer = setInterval(() => {
          getPoint(this.dialogData.altId).then((res) => {
            if (res.data.code == 200) {
              this.num = res.data.data
            } else {
              this.$message.error(res.data.msg)
            }
          })
        }, 3000)
      } else {
        clearInterval(this.timer)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep(::-webkit-scrollbar) {
  display: block !important;
}
.select {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  max-width: 100%;
}

.el-select {
  width: calc(20% - 10px);
  margin-bottom: 20px;
  margin-right: 10px;
}
.btn {
  margin-bottom: 20px;
}
::v-deep .el-dialog {
  width: 40% !important;
}
.table {
  position: relative;
}
.pagination {
  position: absolute;
  right: 0;
}
.dividerBox {
  width: 100%;
  margin-top: 10px;
  margin-left: 15px;
  margin-bottom: 20px;
}
.divider {
  margin-top: -3px;
  width: 3px;
  background-color: #409dff;
}
</style>
